<template>
   <el-row type="flex"  justify="center"  style="margin: 50px auto;">
    <el-col :span="14">
        <el-card :body-style="{ padding: '0px' }">
        <img src="~/assets/image/head.png">
        <div class="introduce"><span style="font-size: 20px">{{paper.name}}  </span></div>
        
        <el-row type="flex"  justify="center" >
            <el-col :span="5" class="tixing"  style="background-color:#DCDCDC;">题型</el-col>
            <el-col :span="5"  class="tixing" style="background-color:#DCDCDC;">单选题</el-col>
        </el-row>
        <el-row type="flex"  justify="center" >
            <el-col :span="5" class="tixing" style="background-color:#F5F5F5">数量</el-col>
            <el-col :span="5" class="tixing" style="background-color:#F5F5F5">{{number}}</el-col>
        </el-row>

        <el-row type="flex"  justify="center">
            <el-col :span="10" class="tixing" style="margin: 30px 0px;" >
                <router-link :to="{name:'exam-id',params:{id:paperId}}" style="text-decoration: none;font-size:15px;"><el-button type="primary" class="Ibutton" >开始做题</el-button></router-link>
                
            </el-col>
        </el-row>

        <el-row type="flex"  justify="center">
            <el-col :span="9" class="tixing" style="margin: 30px 0px;" ><el-divider></el-divider></el-col>
            <el-col :span="3" class="tixing" style="margin: 40px 0px;" >试卷说明</el-col>
            <el-col :span="9" class="tixing" style="margin: 30px 0px;" ><el-divider></el-divider></el-col>
        </el-row>

        <el-row type="flex"  justify="center" style="margin-bottom:100px" >
            <el-col :span="21" class="shuomign">
                <div style="margin: 20px 10px;">
                <span style="color:#778899">1.本套试卷来源于网上，由沐知考试网注册用户提供，除非经特别声明，沐知考试网不拥有该资料版权，亦不承担任何法律责任。</span>
                <br>
                <span style="color:#778899">2.未经网站或作者的同意不得转载，否则构成侵权，本网站或作者保留诉诸法律的权利。</span>
                <br>
                <span style="color:#778899">3.如发现本网站载有侵犯您著作权的侵权信息，可依法向我们提出权利申请，申请方式<el-button type="text" @click="dialogVisible = true">点击查看</el-button>。</span>
                </div>
            </el-col>
        </el-row>

        <el-dialog
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        <span>请发电邮至2213809959@qq.com，提出申请时需提供以下资料：能够确认的有效身份证明、著作权权属证明、侵权情况证明。无法提供或不能完整提供上述资料的，我们将视为您未提出主张，对此产生的一切法律责任我们不予承担。在收到上述完整资料后，我们将会依法尽快删除相关内容。</span>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
        </el-dialog>
        
        </el-card>

    </el-col>
    
</el-row>



</template>

<style>
.introduce{
    margin: 50px auto 80px;
    text-align: center;
    
}

.tixing{
    padding: 8px 0px;
    font-size: 15px;
    text-align: center;
}

.shuomign{
    font-size: 13px;
    line-height: 30px;
    margin-bottom: 100px;
    background-color: #F5F5F5;
    padding: 100px auto;
    
}

.Ibutton{
 background-color:#66CDAA;
 width: 200px;
 border-color:#66CDAA;
 
}

</style>

<script>
import axios from 'axios'
import paperApi from '@/api/paperApi';
export default {
    asyncData({params}){
        return paperApi.getIntroduce(params.pid).then(response =>{
            return {
                paper:response.data.data.paper,
                number:response.data.data.selectList.length,
                paperId:params.pid
            }
        })
    },

    data(){
        return{
            dialogVisible:false,
        }
    },

    methods: {
        handleClose(){
            this.dialogVisible = false;
        }
    }
}
</script>




